import '/src/styles/index.css'
import {useSelector,useDispatch} from "react-redux";
import {decrement, increment,addToNum} from "../store/modules/counterStore.js";
import {useEffect} from "react";
import {fetchChannelList} from "../store/modules/channelStore.js";
export default function Avatar() {
    // 要使用store中的数据，需要用一个钩子函数useSelector，它的作用是把store中的数据映射到组件中
    // 这个state.counter中counter名字，与index.js中counter:counterReducer的counter名字一摸一样
    const {count }=useSelector(state => state.counter);
    // 要使用counterStore中的action方法修改状态值，要使用useDispatch函数，它的作用是生成提交action对象的dispatch函数
    // 得到dispatch函数
    const dispatch=useDispatch();

    const {channelList}=useSelector(state => state.channel)

    useEffect(() => {
        dispatch(fetchChannelList())
    }, [dispatch]);
    return (
        <div>
            {/*注意dispatch中的参数，是counterStore的action函数*/}
            <button onClick={() => dispatch(increment())}>+</button>
            {count}
            <button onClick={() => dispatch(decrement())}>-</button>
            <button onClick={() => dispatch(addToNum(10))}>add to 10</button>
            <button onClick={() => dispatch(addToNum(20))}>add to 20</button>
            <br/>
            <ul>{channelList.map(itemList=><li key={itemList.id}>{itemList.name}</li >)}</ul>
        </div>
    )
}
